<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ball demo</title>
</head>
<body>
<script>
    window.onload = function () {
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        document.body.appendChild(canvas);
        canvas.width = 500;
        canvas.height = 500;
//        var ball1 = new Ball();
//        var ball2 = new Ball();
//        var ball3 = new Ball();
//        var radius = ball1.radius;
//        ball1.x = canvas.width / 2- 2.1 * radius;;
//        ball1.y = canvas.height / 2;
//        ball2.x = canvas.width / 2 ;
//        ball2.y = canvas.height / 2;
//        ball3.x = canvas.width / 2 + 2.1 * radius;
//        ball3.y = canvas.height / 2;
//        var angle = 0,
//                range = 1,
//                speed = 1*Math.PI/180,
//                xspeed = 1,
//                yspeed = 0.05,
//                centerScale = 0,
//                angle1=0,angle2=29* Math.PI /180,angle3=89*Math.PI /180;
        var ball = new Ball();
//        ball.x = canvas.width/2+ball.radius;
//        ball.y=canvas.height/2;
        var speed = 0.05, angle = 0, radiusX = 100, radiusY = 50;
        (function drawFrame() {
            window.requestAnimationFrame(drawFrame);
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            //正弦曲线
//            ball.x += xspeed;
//            if(ball.x > canvas.width-ball.radius) ball.x = -ball.radius;
//            ball.x = canvas.width/2 + Math.sin(angle)*range;
//            ball.y = canvas.height/2+ Math.sin(angle)*range;

            //脉冲 加载前动画
//        angle1 += speed;
//        angle2 += speed;
//        angle3 += speed;
//        console.log(angle1);console.log(angle2);console.log(angle3);
//        ball1.scaleX = ball1.scaleY = centerScale + Math.sin(angle1) * range;
//        ball2.scaleX = ball2.scaleY = centerScale + Math.sin(angle2) * range;
//        ball3.scaleX = ball3.scaleY = centerScale + Math.sin(angle3) * range;
//        console.log(ball1.scaleX + "\n" + ball2.scaleX + '\n' + ball3.scaleX);
//        ball1.draw(ctx);
//        ball2.draw(ctx);
//        ball3.draw(ctx);
            //圆周运动
            angle += speed;
//            if(ball.x > canvas.width-ball.radius) ball.x = -ball.radius;
            ball.x = canvas.width / 2 + Math.sin(angle) * radiusX;
            ball.y = canvas.width / 2 + Math.cos(angle) * radiusY;
            ball.draw(ctx);
            //canvas中心
            ctx.beginPath();
            ctx.strokeStyle = '#ff5001';
            ctx.arc(canvas.width / 2, canvas.height / 2, 1, 0, Math.PI);
            ctx.stroke();
            ctx.closePath();
        })()
    }
</script>
</body>
<script src="ball.js"></script>
<script src="util.js"></script>
</html>